<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <el-col :span="7">
          <div class="grid-header header-left">

            <el-select v-model="province" size="mini" class="select-input">
              <el-option
                  v-for="item in provinceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>

            <el-select v-model="city" size="mini" class="select-input">
              <el-option
                  v-for="item in cityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>

          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-header header-middle">儿童青少年视力档案数据面板</div>
        </el-col>
        <el-col :span="7">
          <div class="grid-header header-right"></div>
        </el-col>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="7">
        <div class="grid-content content-left">
          <div class="content-left-box content-left-box-top">
            <div class="title-box">项目汇总</div>
            <div class="content-left-body">
              <div class="content-left-body-left">
                <span>计划人数</span>
                <div style="font-size: 26px;">
                  <CountTo :startVal='0' :endVal='data.batchTotal'/>
                </div>
                <span>检查人数</span>
                <div style="font-size: 26px;">
                  <CountTo :startVal='0' :endVal='data.screenTotal'/>
                </div>
                <el-progress :text-inside="true" :stroke-width="20" :percentage="percentage" status="success"></el-progress>
              </div>
              <div class="content-left-body-right" id="nanv-pie"></div>
            </div>
          </div>
          <div class="content-left-box content-left-box-center">
            <div class="title-box">学校执行情况</div>
            <div class="content-left-body">
              <div class="content-left-body-left">
                <span>总数 <CountTo :startVal='0' :endVal='data.schoolCount.total'/></span>
                <el-divider></el-divider>
                <span>幼儿园 <CountTo :startVal='0' :endVal='data.schoolCount.youeryuan'/></span>
                <span>小学 <CountTo :startVal='0' :endVal='data.schoolCount.xiaoxue'/></span>
                <span>初中 <CountTo :startVal='0' :endVal='data.schoolCount.chuzhong'/></span>
                <span>高中 <CountTo :startVal='0' :endVal='data.schoolCount.gaozhong'/></span>
                <span>其他 <CountTo :startVal='0' :endVal='data.schoolCount.others'/></span>
              </div>
              <div class="content-left-body-right" id="schoolcount-pie"></div>
            </div>
          </div>
          <div class="content-left-box content-left-box-bottom">
            <div class="title-box">本年度增长</div>
            <div class="content-left-body">
              <div id="line-bar"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content content-middle">
          <div class="content-middle-body">
            <div id="map"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content content-right">
          <div class="content-right-box content-right-box-top">
            <div class="title-box">近视数据</div>
            <div class="content-right-body" style="border-bottom: #20a0ff 1px solid;">
              <div class="content-right-body-left">
                <span>筛查总人数</span>
                <div style="font-size: 30px;">
                  <CountTo :startVal='0' :endVal='data.screenTotal'/>
                </div>
              </div>
              <div class="content-right-body-right" id="jinshi-pie"></div>
            </div>
            <div class="content-right-body" style="">
              <table style="width: 100%;font-size: 14px;">
                <tr v-for="(item,index) in data.stageData" :key="index">
                  <td style="color: #20a0ff">{{ index + 1 }}</td>
                  <td style="white-space: nowrap;">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</td>
                  <td style="width: 100%">
                    <el-progress :text-inside="true" :stroke-width="16" :percentage="Math.floor((item.value/data.screenTotal) * 10000) / 100"></el-progress>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="content-right-box content-right-box-bottom">
            <div class="title-box">近视排行榜</div>
            <div class="content-right-body">
              <table style="width: 100%;font-size: 14px;padding-bottom:30px;">
                <tr v-for="(item,index) in data.schoolSort">
                  <td style="color: #20a0ff">{{ index + 1 }}</td>
                  <td style="white-space: nowrap;">&nbsp;&nbsp;{{ item.school }}&nbsp;&nbsp;</td>
                  <td style="width: 100%">
                    <el-progress :text-inside="true" :stroke-width="16" :percentage="item.percentage"></el-progress>
                  </td>
                </tr>
              </table>

            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import china from '@/assets/map/100000_full.json'
import guangzhou from '@/assets/map/440100_full.json'
import honkong from '@/assets/map/810000_full.json'
import HK from '@/assets/map/HK.json'
import {getAnalysis} from "@/api";


export default {
  name: "index",
  components: {
    CountTo
  },
  data() {
    return {
      provinceOptions: [{label: '广东', value: '广东'}],
      cityOptions: [{label: '广州', value: '广州'}],
      province: '广东',
      city: '广州',
      data: {
        "batchTotal": 7521,
        "screenTotal": 6,
        "sexTotal": [],
        "schoolPieData": [],
        "schoolCount": {},
        "yearCount": {
          "month": [],
          "count": []
        },
        "myopiaData": [],
        "stageData": [],
        "schoolSort": [],
        "mapData": []
      },
      percentage: 0
    }
  },
  async mounted() {
    this.data = await this.getData()
    this.percentage = Math.floor((this.data.screenTotal / this.data.batchTotal) * 10000) / 100

    this.drawSexPie()
    this.drawLine()
    this.drawJinshiPie()
    this.drawSchoolCountPie()
    this.drawMap()

  },
  methods: {
    getData() {
      return new Promise((async (resolve) => {
        let res = await getAnalysis();
        resolve(res.data)
      }))
    },
    drawSexPie() {
      let sexTotal = this.data.sexTotal
      let chart = this.$echarts.init(document.getElementById('nanv-pie'), 'dark')
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: sexTotal
          }
        ]
      })

    },
    drawLine() {
      let month = this.data.yearCount.month
      let data = this.data.yearCount.count
      let chart = this.$echarts.init(document.getElementById('line-bar'), 'dark')
      chart.setOption({
        xAxis: {
          type: 'category',
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data,
            type: 'bar'
          }
        ]
      })
    },
    drawSchoolCountPie() {
      let schoolPieData = this.data.schoolPieData
      let chart = this.$echarts.init(document.getElementById('schoolcount-pie'), 'dark')
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          x:'right',
          y:'center',
          padding:[0,0,30,0],
          orient: "vertical",
        },
        series: [
          {
            name: '各学段分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: schoolPieData,
            center:['40%','50%']
          }
        ],

      })
    },
    drawJinshiPie() {
      let myopiaData = this.data.myopiaData
      let chart = this.$echarts.init(document.getElementById('jinshi-pie'), 'dark')
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '男女占比',
            type: 'pie',
            radius: '50%',
            data: myopiaData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

          }
        ]
      })
    },
    drawMap() {
      let mapData = this.data.mapData
      let screenTotal = this.data.screenTotal
      let chart = this.$echarts.init(document.getElementById('map'), 'dark')
      // chart.hideLoading();

      this.$echarts.registerMap('中国', china);
      this.$echarts.registerMap('广州', guangzhou);
      chart.setOption({
        title: {
          text: '广州筛查人群分布图',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (人)'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 0,
          max: 2000,
          text: ['高', '低'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '广州筛查人群分布图',
            type: 'map',
            map: '广州',
            label: {
              show: true
            },
            data: mapData
          }
        ]
      })
    },

  },

}
</script>

<style scoped>
.container {
  background-color: #100C2A;
  color: white;
  /*overflow: hidden;*/
}

.grid-content {
  height: calc(100vh - 60px) !important;

}

.grid-header {
  height: 60px !important;
}

.header-middle {
  line-height: 60px;
  background: url("./images/title_border.png") bottom center no-repeat;
  font-size: 24px;
  text-align: center;
  font-weight: bolder;
}

.header-left {
  background: url(./images/line_img.png) top right repeat-y;

  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.select-input {
  width: 90px;
  /* 为其整体设置接近透明的效果*/

}

/deep/ .el-input__inner {
  /* 使input框的背景变透明 */
  background-color: transparent;
}


.header-right {
  background: url(./images/line_img.png) top left repeat-y;
}

/**********内容左边***********/
.title-box {
  background: url(./images/box_title.png) top left no-repeat;
  background-size: 100% 100%;
  height: 30px;
  line-height: 30px;
  padding-left: 30px;
  font-size: 16px;
}

.content-left {
  padding: 0 20px 0 10px;
  background: url(./images/line_img.png) top right repeat-y;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  overflow: hidden;
}

.content-left-box {
  height: 100%;
  overflow: hidden;
}

.content-left-box-top {
  flex: 3;
}

.content-left-box-center {
  flex: 4;
}

.content-left-box-bottom {
  flex: 4;
}

.content-left-body {
  background-size: 100% 100%;
  display: flex;
  height: 100%;
  padding: 5px 10px;
}

.content-left-body-left {
  display: flex;
  flex-direction: column;
  flex: 3;
  height: 100%;
}

.content-left-body-right {
  flex: 5;
  height: 100%;
}


#line-bar {
  flex: 1;
}


/*********中间***********/


.content-middle {
  display: flex;

}

.content-middle-body {
  flex: 1;
  margin: 20px;
  /*border: 1px #4cbb15 solid;*/
  display: flex;

}

#map {
  flex: 1;
}

/*********右边***********/
.content-right {
  background: url(./images/line_img.png) top left repeat-y;
  padding: 0 10px 0 20px;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  overflow: hidden;

}

.content-right-box {
  height: 100%;
  overflow: hidden;
}

.content-right-box-top {
  flex: 12;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  height: 100%;
}

.content-right-box-bottom {
  flex: 11;
  height: 100%;
}

.content-right-body {
  flex: 1;
  display: flex;
  /*height: 100%;*/
  padding: 5px 10px;
  height: 100%;
}

.content-right-body-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  flex: 2;
}

.content-right-body-right {
  flex: 5;
  height: 100%;
}


</style>